<template>
  <div class="classify-main">
    <div class="header">
      <div class="header-top">
        <span>全部视频</span>
        <div class="hr"></div>
      </div>

      <div class="header-container">
        <div class="title">类型:</div>
        <div
          v-for="(item, index) in classifyList"
          :key="item"
          @click="active(index, 0)"
        >
          <div class="text" :class="{ active: classifyIndex === index }">
            {{ item }}
          </div>
        </div>
      </div>

      <div class="header-container">
        <div class="title">排序:</div>
        <div
          v-for="(item, index) in orderList"
          :key="item"
          @click="active(index, 1)"
        >
          <div class="text" :class="{ active: orderIndex === index }">
            {{ item }}
          </div>
        </div>
      </div>
    </div>

    <div class="contaner">
      <div class="video-list" v-if="videoList.length !== 0">
        <div class="video-item" v-for="item in videoList" :key="item">
          <router-link :to="'/videoDetail/' + item.id">
            <div class="item-border">
              <el-image
                :src="item.coverUrl"
                style="width: 180px; height: 130px; border-radius: 8px"
              ></el-image>
              <div class="video-item-footer">
                <span class="item-title">{{
                  formatTitle(item.videoTitle)
                }}</span>

                <div class="item-footer-contain">
                  <span class="item-text"
                    ><el-icon><View /></el-icon>{{ item.playNumber }}</span
                  >
                  <span class="item-text"
                    ><el-icon><Stopwatch /></el-icon
                    >{{ dateFormat(item.gmtCreate) }}</span
                  >
                </div>

                <span class="item-text"
                  ><el-icon><User /></el-icon>{{ item.nickName }}</span
                >
              </div>
            </div>
          </router-link>
        </div>
      </div>

      <div v-if="videoList.length === 0" class="null-recodes">暂无数据</div>
    </div>
    <div class="footer" v-if="videoList.length !== 0">
      <el-pagination
        v-model:currentPage="page.currentPage"
        v-model:page-size="page.pageSize"
        :pager-count="page.pageCount"
        :total="page.total"
        @current-change="currentChange"
        small
        background
        layout="prev, pager, next"
      />
    </div>
  </div>
</template>

<script>
import VideoApi from '@/api/core/VideoList'
import moment from 'moment'
export default {
  name: 'VideoClassify',
  data() {
    return {
      classifyList: ['全部', '动漫', '娱乐', '科技'],
      orderList: ['播放量', '时间', '热度'],
      classifyIndex: 0,
      orderIndex: 0,
      searchText: '',
      page: {
        currentPage: 1, //当前页数
        pageSize: 20, //每页记录数
        total: 0, //总记录数
        pageCount: 7, //每页折叠数
      },
      videoList: [],
    }
  },

  created() {
    this.initData(this.$route.query)
  },
  beforeRouteUpdate(to) {
    this.initData(to.query)
    console.log(to.query)
  },
  methods: {
    //初始化数据
    initData(data) {
      const routeInfo = data
      this.classifyIndex = parseInt(routeInfo.type) || 0
      this.orderIndex = parseInt(routeInfo.order) || 0

      this.searchText = routeInfo.name || ''
      this.page.currentPage = parseInt(routeInfo.currentPage) || 1

      this.getVideo(
        this.searchText,
        this.classifyIndex,
        this.orderIndex,
        this.page.currentPage
      )
    },

    getVideo(keyword, type = 0, order = 0, current = 1) {
      VideoApi.getAllVideo(keyword, type, order, current)
        .then((response) => {
          this.videoList = response.data.videoPage.records
          this.page.total = response.data.videoPage.total
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    currentChange() {
      this.$router.push({
        path: '/video-class',
        query: {
          name: this.searchText,
          type: this.classifyIndex,
          order: this.orderIndex,
          currentPage: this.page.currentPage,
        },
      })
    },

    //点击修改选中颜色 跳转路由
    active(index, type) {
      if (type === 0) {
        this.classifyIndex = index
      } else {
        this.orderIndex = index
      }
      this.page.currentPage = 1
      this.$router.push({
        path: '/video-class',
        query: {
          name: this.searchText,
          type: this.classifyIndex,
          order: this.orderIndex,
          currentPage: this.page.currentPage,
        },
      })
    },

    //格式话标题
    formatTitle(text) {
      if (text.length < 24) {
        return text
      }
      return text.substring(0, 24) + ' ...'
    },

    //格式化时间
    dateFormat(date) {
      return moment(date).format('YYYY-MM-DD')
    },
  },
}
</script>

<style scoped>
.classify-main {
  width: 1080px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.classify-main .header {
  width: 60%;
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 20px;
}
.classify-main .header .title {
  color: #c5b3c1;
  width: 40px;
  margin-right: 5px;
  margin-top: 3px;
}
.classify-main .header .text {
  width: 60px;
  height: 30px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: lighter;
  border-radius: 8px;
}
.classify-main .header .header-top {
  margin-top: 10px;
}
.classify-main .header .header-container {
  display: flex;
  margin-top: 7px;
}
.hr {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid #e3d4d43d;
}

.classify-main .contaner {
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.classify-main .contaner .video-list {
  width: 1100px;
  display: flex;
  flex-wrap: wrap;
}
.classify-main .contaner .video-list .video-item {
  width: 20%;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.classify-main .contaner .null-recodes {
  width: 1100px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #efefef;
  color: #8c9191;
  font-size: 25px;
}
.item-border {
  border: 1px solid #e5e9ef;
  border-radius: 8px;
}
.classify-main .contaner .video-list .video-item .video-item-footer {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.item-footer-contain {
  width: 80%;
  display: flex;
  justify-content: space-between;
}
.item-title {
  width: 165px;
  height: 18px;
  color: #333;
  margin-left: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  white-space: pre-line;
}
.item-text {
  color: #8c9191;
  min-height: 19px;
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 9px;
  margin-left: 10px;
}
.active {
  color: white;
  background-color: #409eff;
}

a {
  text-decoration: none;
}
</style>
